import { SearchOutlined } from '@ant-design/icons';
import { AutoComplete, Button, Input, Modal } from 'antd';
import React from 'react';
import { useRef, useState } from 'react';

const Search = ({ onDataItems }) => {
    const ref = useRef<any>();
    const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);

    const [value, setValue] = useState('');
    const [open, setOpen] = useState<boolean>(false);

    const mockVal = (str: string, repeat = 1) => ({
        value: str.repeat(repeat),
    });

    const search = () => {
        setOpen(true);
    }

    const handleSearch = (value: string) => {
        // debugger
    };

    const onSearch = (searchText: string) => {
        // setOptions(
        // !searchText ? [] : dataList
        // );
    };

    const onSelect = (data: string) => {
        console.log('onSelect', data);
    };

    const onChange = (data: string) => {
        setValue(data);
        onDataItems(data);
    };

    return (
        // <AutoComplete
        //     value={value}
        //     options={options}
        //     style={{ width: 200 }}
        //     onSelect={onSelect}
        //     onChange={onChange}
        //     placeholder="control mode"
        // />
        <>
            <div onClick={search}>
                <Input placeholder='搜索' style={{ "position": "relative" }}></Input>
                <SearchOutlined style={{ "position": "absolute", "right": 26, "top": 6, "fontSize": 20 }} />
            </div>
            {
                open ?
                    <Modal title="搜索" open={open} footer={[
                        <Button key="back" onClick={() => setOpen(false)}>
                            关闭
                        </Button>]}>
                        <AutoComplete
                            dropdownMatchSelectWidth={252}
                            style={{ width: 300 }}
                            options={[]}
                            onSelect={onSelect}
                            onSearch={handleSearch}
                        >
                        </AutoComplete>
                    </Modal> : null
            }
        </>
    )
}

export default Search;

